<template>
  <div class="card">
    <div class="image-container">
      <img :src="image.url" :alt="image.title" class="card-image" />
      <div class="image-text">
        <h3>{{ image.title }}</h3>
        <p>{{ image.description }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps({
  image: {
    type: Object,
    required: true
  }
});
</script>

<style scoped>
.card {
  width: 45%;
  /* 让每张图片占据45%的宽度，留出一些间距 */
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  display: inline-block;
  /* 让多张图片能够放在一列 */
  vertical-align: top;
  /* 垂直对齐方式 */
}

.image-container {
  position: relative;
}

.card-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.image-text {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
}
</style>
